<template>
  <div class="d-flex justify-content-center align-items-center box">
    <div class="w-100">
      <div class="w-100 d-flex justify-content-center align-items-center">
        <div class="w-25">
          <el-form label-position="right" label-width="80px" :model="formLabelAlign">
            <el-form-item label="账号">
              <el-input v-model="formLabelAlign.phone"></el-input>
            </el-form-item>
            <el-form-item label="密码">
              <el-input v-model="formLabelAlign.password" type="password"></el-input>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div class="text-center">
        <el-button type="primary" @click="login">登录</el-button>
      </div>
    </div>
  </div>
</template>

<script>
  import { userLogin } from '../apis/login'
  export default {
    name: "Login",
    data(){
      return{
        formLabelAlign: {
          phone: '',
          password: ''
        }
      }
    },
    mounted(){
      // if(localStorage.getItem('token')){
      //   this.$router.push({ name: "index" });
      // }
    },
    methods: {
      async login(){
        if (this.formLabelAlign.phone === '') {
          this.$message.error('请输入手机号');
          return false;
        }
        let myreg = /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/;
        if (!myreg.test(this.formLabelAlign.phone)) {
          this.$message.error('手机号格式不对');
          return false;
        }
        if (this.formLabelAlign.password === '') {
          this.$message.error('请输入密码');
          return false;
        }
        let params = this.formLabelAlign;
        const result = await userLogin(params);
        // console.log('result:', result);
        if(result.data.status === 1){
          this.$router.push({ name: "index" });
          localStorage.setItem("token", result.data.data[0].api_token);
        } else {
          this.$message({
            message: result.data.data.msg,
            type: 'error'
          });
          return false;
        }
      }
    }
  }
</script>

<style scoped>
  .box{
    padding-top: 300px;
  }
</style>